<template>
  <el-drawer
      :title="chooseType==1?'选择发布区角':'选择预约班级'"
      :visible.sync="dialogVisible"
      size="30%"
      :close-on-press-escape="closscape"
      :before-close="handleClose"
      :destroy-on-close="true"
      @close="$emit('update:visible',false)">
    <div class="table-body-list">
      <div class="top-button-bottom">
        <el-button type="primary" @click.native="checkfood(1)" size="small">确定</el-button>
        <el-button @click.native="checkfood(2)" size="small">取消</el-button>
      </div>
      <div v-show="chooseTypeStatus==1" style="overflow-y: auto;height:calc(100vh - 150px)">
        <el-table :data="gridData"
                  @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55"
              align="center"
              :selectable='checkboxT'>
          </el-table-column>
          <el-table-column label="展示图" width="80" property="pic">
            <template slot-scope="scope">
              <div class="checkImgDialog width40"
                   :style="{backgroundImage:'url('+scope.row.pic+')',backgroundSize:'cover',backgroundPosition:'center'}">
                <div class="imgpreviewBody">
                  <div class="imgpreview">
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="name" label="区角名称" align="center"></el-table-column>
          <el-table-column label="区角状态" align="center">
            <template slot-scope="scope">
              <span
                  :style="{'color':scope.row.is_open==1?'red':'green'}">{{ scope.row.is_open == 1 ? '已发布' : '可发布' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <p class="morelist" v-if="gridData.length<page.total" @click="getmoreList(1)">加载更多</p>
      </div>
      <div v-show="chooseTypeStatus==2" style="overflow-y: auto;height:calc(100vh - 150px)">
        <el-table :data="gridData"
                  @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55"
              align="center">
          </el-table-column>
          <el-table-column property="section_id" label="年段"></el-table-column>
          <el-table-column property="class_name" label="班级">
          </el-table-column>
        </el-table>
        <p class="morelist" v-if="gridData.length<page.total" @click="getmoreList(2)">加载更多</p>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import api from '@/utils/api.js'
import {pagination} from '@/utils/util.js'

export default {
  name: 'Dialog',
  props: ['visible', 'SelectionValNew', 'chooseType'],
  watch: {
    visible () {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('混入帅选页面', this.chooseType)
        this.chooseTypeStatus = this.chooseType
        this.cornerListFn()
      } else {
        this.page.pageindex = 1
      }
    },
    SelectionValNew () {
      console.log('选择内容：', this.SelectionValNew)
      this.SelectionVal = this.SelectionValNew
    }
  },
  data () {
    return {
      chooseTypeStatus: '',
      closscape: false,
      dialogVisible: this.visible,
      gridData: [],
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      classList: [],
      SelectionVal: this.SelectionValNew
    }
  },
  created () {
  },
  methods: {
    checkboxT (row, rowIndex) {
      console.log(row, rowIndex)
      if (row.is_open === 1) {
        return false// 禁用
      } else {
        return true// 不禁用
      }
    },
    cornerListFn () {
      let url_ = api.admin_corner_index
      let data_ = {p: this.page.pageindex}
      if (this.chooseType === 2) {
        url_ = api.admin_classes_index
      } else {
        data_.status = 1
      }
      this.$post(url_, data_).then((response) => {
        if (response.code === 0) {
          let list = JSON.parse(JSON.stringify(this.gridData))
          this.gridData = list.concat(response.list.data)
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getmoreList () {
      this.page.pageindex++
      this.cornerListFn()
    },
    // 选项
    handleSelectionChange (val) {
      this.SelectionVal = val
    },
    checkfood (option) {
      console.log('选中的内容', this.SelectionVal)
      if (option === 1) {
        if (this.SelectionVal.length === 0) {
          this.$message.error('请选择需要的内容')
          return
        }
        let option_ = {type: this.chooseType, list: this.SelectionVal}
        this.$emit('chooseGridData', option_)
      }
      this.dialogVisible = false
      this.SelectionVal = []
      this.classList = []
      this.gridData = []
    },
    handleClose (done) {
      this.dialogVisible = false
      this.SelectionVal = []
      this.classList = []
      this.gridData = []
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {});
    }
  }
}
</script>
<style scoped>
.morelist {
  text-align: center;
  padding: 5px 0;
  margin-top: 10px;
  color: #1b8de5;
  cursor: pointer;
}
</style>
